<template>
  <el-container style="height: 100%;">
    <!-- 左侧二级导航 -->
    <el-aside width="220px" style="background-color: #f5f7fa; border-right: 1px solid #e4e7ed;">
      <el-menu
          :default-active="activePath"
      mode="vertical"
      @select="handleSelect"
      background-color="#f5f7fa"
      text-color="#333"
      active-text-color="#1890ff"
      style="height: 100%; border-right: none;"
      ref="menu"
      >
      <el-menu-item index="/home/deviceadmin/devicefile">
        <template #title>
          <i class="el-icon-folder"></i>
          <span>设备档案</span>
        </template>
      </el-menu-item>

      <!-- 设备文档 -->
      <el-menu-item index="/home/deviceadmin/documents">
        <i class="el-icon-document"></i>
        <span>设备文档</span>
      </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 右侧内容区域 -->
    <el-main style="padding: 20px;">
      <router-view />
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'DeviceManage',
  data() {
    return {
      activePath: ''  // 存储当前选中的路径
    };
  },
  mounted() {
    // 初始化时设置默认选中项
    this.setDefaultActive();
  },
  methods: {
    handleSelect(key) {
      this.$router.push(key);
    },
    // 关键：根据当前路由设置默认选中项
    setDefaultActive() {
      const currentPath = this.$route.path;
      // 定义所有有效的导航项路径
      const validPaths = [
        '/home/deviceadmin/devicefile',
        '/home/deviceadmin/documents'
      ];
      // 如果当前路由是有效的导航项路径，则选中对应项
      if (validPaths.includes(currentPath)) {
        this.activePath = currentPath;
      } else {
        // 否则默认选中第一个导航项（设备档案）
        this.activePath = '/home/deviceadmin/devicefile';
      }
    }
  },
  watch: {
    // 路由变化时同步选中状态
    '$route'() {
      this.$nextTick(() => {
        this.setDefaultActive();
        // 手动更新菜单选中状态（确保生效）
        this.$refs.menu.activeIndex = this.activePath;
      });
    }
  }
};
</script>

<style scoped>
.el-aside {
  min-height: calc(100vh - 120px);
}
.el-menu {
  border-right: none;
}
/* 选中样式强化 */
/deep/ .el-menu-item.is-active {
  background-color: #e6f7ff !important; /* 浅蓝色背景 */
  color: #1890ff !important; /* 选中文字颜色 */
}
</style>